<template>
  <section class="player-container">
    <iframe id="player" :src="iframeSRC" style="width: 100%;" frameborder="0"  allowfullscreen ></iframe>
  </section>
</template>

<script>
  // import { setupIframeBridge } from 'wvr-player-shared';
  import { build as buildQueryString } from '@m7/qs';

  export default {
    props: {
      para: {
        type: Object,
        default: {}
      }
    },
    computed: {
      iframeSRC () {
        let iframeURL = 'http://mediags.open.vr.moguv.com/vrh5/sphere2kzc/index.html';
        if (/live\.zcstream/ig.test(this.para.src)) {
          iframeURL = 'https://live.zcstream.moguv.com/whaleyvr-player-h5/index.html';
        }
        return `${iframeURL}?${buildQueryString(this.para)}`;
      }
    },
    mounted () {
      this.iframe = document.querySelector('iframe');
      // setupIframeBridge(this.iframe);

      window.addEventListener('message', (e) => {
        if (e.data.isFullScreen) {
          this.iframe.className += ' fullScreen';
        } else {
          this.iframe.className = this.iframe.className.replace(/fullScreen/g, '');
        }
      });
    }
  };
</script>
<style lang="scss">
  .player-container {
    height: 100vh;
    overflow: hidden;
    background: transparent;
    iframe {
      z-index: 999;
      width: 100vw;
      height: 100vh;
    }
  }
</style>
<style>
  .fullScreen {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 999;
  }
</style>
